<div class="figure-wrapper">
  <figure
    style="justify-content: center; align-items: center"
    class="styled-example"
    aria-label="Image of a checkbox with a different theme applied"
  >
    <style>
      .styled-example {
        background-color: white;
        border-radius: 28px;
        /* System tokens */
        --md-sys-color-primary: #006a6a;
        --md-sys-color-on-primary: #ffffff;
        --md-sys-color-on-surface-variant: #3f4948;
        /* Component tokens */
        --md-checkbox-container-shape: 0px;
      }
    </style>
    <md-checkbox touch-target="wrapper"></md-checkbox>
    <md-checkbox touch-target="wrapper" checked></md-checkbox>
  </figure>
</div>
